<!-- 用户未登录时显示的组件 -->
<template>
   <view class="login-container">
      <!-- 提示登录的图标 -->
      <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
      <!-- 登录按钮 -->
      <!-- <button type="primary" class="btn-login" @click="getUserProfile">一键登录</button> -->
      <button type="primary" class="btn-login"  @click="getUserProfile">一键登录</button>
      <!-- 登录提示 -->
      <view class="tips-text">登录后尽享更多权益</view>
    </view>
</template>

<script>
  import {mapMutations,mapState} from 'vuex'
  export default{
    data(){
      return {}
    },
    computed:{
       // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
          ...mapState('m_user', ['redirectInfo']),
    },
    methods:{
      //引入存储微信用户数据的方法
      ...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo']),
      
      // 获取用户授权
      getUserProfile(){
        // 地址的那个，不需要授权了。获取用户信息的这个，uni.getUserProfile才会有授权弹框弹出。 至于老师的uni.getUserInfo，在已经授权下，才能获取数据，否则获取的匿名数据
          uni.getUserProfile({
                  desc: '你的授权信息',
                  success: (res) => {
                    // console.log(res);
                    // 将信息存到 vuex 中
                    this.updateUserInfo(res.userInfo)
                    this.getToken(res)
                  },
                  fail: (res) => {
                    return uni.$showMsg('您取消了登录授权')
                  }
                })
      },
      async getToken(info){
       //获取code对应的值
        const [err,res]=await uni.login().catch(err=>err)
        if(err || res.errMsg !=='login:ok') return uni.$showMsg('登录失败')
        // console.log('res.code',res.code);
        
        // 准备参数对象
        const query = {
          code: res.code,
          encryptedData: info.encryptedData,
          iv: info.iv,
          rawData: info.rawData,
          signature: info.signature
        }
        
        // 换取 token
        // 只有被管理员配置为小程序的开发者以后，学生才能调用成功登录，支付这些特殊的接口。而且这个开发者权限人数只有几十个，无法给各位学生一一分配权限，因此大家会调用失败
        //这里登录不了是因为黑马优购你必须被他们自己官方添加进开发者才能继续往下做 行了学到这里已经是极限了
          const { data: loginResult } = await uni.$http.post('https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin', query)
          if (loginResult.meta.status !== 400) return uni.$showMsg('登录失败！')
            // 因为权限的原因导致我们被办法 获取到真正的token 所以在这里制造一个假数据
          const tokens={
               "token": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjEyLCJpYXQiOjE1MjU0MDIyMjMsImV4cCI6MTUyNTQ4ODYyM30.g-4GtEQNPwT_Xs0Pq7Lrco_9DfHQQsBiOKZerkO-O-o"
          }
          this.updateToken(tokens)
          uni.$showMsg('登录成功')
          
         // 判断 vuex 中的 redirectInfo 是否为 null
         // 如果不为 null，则登录成功之后，需要重新导航到对应的页面
          // this.navigateBack()
     },
     // 返回登录之前的页面
     //  navigateBack(){
     //    console.log(this.redirectInfo);
     //    // redirectInfo 不为 null，并且导航方式为 switchTab
     //     if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
     //       // 调用小程序提供的 uni.switchTab() API 进行页面的导航
     //       uni.switchTab({
     //         // 要导航到的页面地址
     //         url: this.redirectInfo.from,
     //         // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
     //         // complete: () => {
     //         //   this.updateRedirectInfo(null)
     //         // }
     //       })
     //     }
     // }
    },
   
  }
</script>

<style lang="scss">
  .login-container{
     // 登录盒子的样式
      height: 750rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #f8f8f8;
      position: relative;
      overflow: hidden;
         
           // 绘制登录盒子底部的半椭圆造型
           &::after{
             content: '';
             width: 100%;
             height: 40px;
             background-color: white;
             border-radius: 100%;
             position: absolute;
             bottom: 0;
             transform: translateY(50%);
           }
      .btn-login{
         width: 90%;
            border-radius: 100px;
            box-shadow: 0 0 15px #c00000;
            margin: 15px 0;
            background-color: #c00000;
      }
      .tips-text{
        font-size: 12px;
        color:gray;
      }
  }
</style>
